<template>
  <center class="landheader">

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
      <el-menu-item style="margin-left: 45px"><a href="#/"><img src="https://www.ketangpai.com/Public/Home/img/logo-mainblue.png" width="96px" height="24px"></a></el-menu-item>
      <el-menu-item index="1">课堂</el-menu-item>
      <el-menu-item index="2">精品慕课</el-menu-item>
      <el-menu-item index="3" >我的精品</el-menu-item>
      <el-menu-item index="4">双选会</el-menu-item>
      <el-menu-item index="6" style="position: relative">论文管理<img style="position: absolute; top: 14px;right: 0px;width: 21px;height: 10px" src="https://www.ketangpai.com/Public/Home/img/summary/hot.png" ></el-menu-item>
      <tools></tools>
    </el-menu>
  </center>
</template>

<script>
  import Tools from "./Tools";

  export default {
    name: "LandHomeHeader",
    data() {
      return {
        activeIndex: '1',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    components:{
      Tools,
    }

  }
</script>

<style scoped>
  .landheader .el-menu--horizontal>.el-menu-item.is-active{
    border-bottom: 4px solid #409EFF!important;

  }
</style>

